<template>
  <div class="teacherDetail">
    <teacher-bar></teacher-bar>
    <div class="detail">
      <div>
        <img :src="teacherInfo.teacher.avatar" />
        <span>{{teacherInfo.teacher.introduction}}</span>
      </div>
      <button v-show="flag==0 || flag==1" @click="cut">关注</button>
      <button v-show="flag==2" @click="cut">取消关注</button>
    </div>
    <div class="nav">
      <navBar></navBar>
    </div>
  </div>
</template>
<script>
import teacherBar from "@/components/teacherBar";
import navBar from "@/components/navBar";
import { reactive, toRefs, onMounted } from "vue";
import { getTeacher, getGuanzhu } from "../../request/home";
import { useRoute } from "vue-router";
export default {
  components: {
    teacherBar,
    navBar
  },
  setup(props) {
    let { query } = useRoute();
    console.log(query.id);
    const data = reactive({
      teacherInfo: {},
      flag: 0
    });
    getTeacher(query.id).then(res => {
        console.log(res);
        data.teacherInfo = res.data.data;
        data.flag = res.data.data.flag;
      });

    const cut = () => {
      getGuanzhu(query.id).then(res => {
        console.log(res);
        data.flag = res.data.data.flag;
      });
    };
    return { ...toRefs(data), cut };
  }
};
</script>
<style lang="scss" scoped>
.teacherDetail {
  height: 100vh;
  background: #f2f3f5;
  position: relative;
  .detail {
    width: 90%;
    height: 144px;
    background: #fff;
    position: absolute;
    top: 63px;
    left: 5vw;
    border-radius: 10px;
    display: flex;
    padding: 0 10px;
    align-items: center;
    font-size: 14px;
    img {
      vertical-align: middle;
    }
    button {
      width: 90px;
      height: 40px;
      margin-left: 200px;
      outline: none;
      border: none;
      background: #ebeefe;
      color: #eb6100;
      border-radius: 30px;
      font-size: 14px;
    }
  }
}
.nav {
  margin-top: 80px;
  background: #fff;
}
</style>